<template>
  <el-dialog
      title="待加入会诊"
      :visible.sync="visible"
      width="600px"
      :close-on-click-modal="false"
      custom-class="meeting-room-dialog"
  >
    <!-- 会议室列表 -->
    <div class="room-list">
      <template v-if="roomList.length">
        <div
            v-for="room in roomList"
            :key="room.id"
            class="room-item"
        >
          <div class="room-info">
            <div class="room-name">会诊号：{{ room.roomId }}</div>
            <div class="room-detail">
              <span class="member-count">
                <i class="el-icon-user"></i>
                {{ room.currentMembers }}/{{ room.maxMembers }}
              </span>
              <span class="room-status" :class="room.status">
                {{ getStatusText(room.status) }}
              </span>
            </div>
          </div>
          <el-button
              type="primary"
              size="small"
              @click="handleJoin(room)"
          >
            加入
          </el-button>
        </div>
      </template>

      <!-- 空状态 -->
      <el-empty
          v-else
          description="暂无可加入的会议室"
      ></el-empty>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'MeetingRoomDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    roomList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
    }
  },
  methods: {
    // 处理加入会议室
    async handleJoin(room) {
      try {
        // 这里替换为实际的加入会议室API
        await this.$http.post(`/api/meeting-rooms/${room.id}/join`);

        this.$message.success('加入成功');
        this.$emit('join-success', room);
        this.$emit('update:visible', false);
      } catch (error) {
        this.$message.error('加入失败：' + error.message);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.meeting-room-dialog {
  .search-area {
    margin-bottom: 20px;
  }

  .room-list {
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
  }

  .room-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #ebeef5;

    &:last-child {
      border-bottom: none;
    }

    .room-info {
      flex: 1;
      margin-right: 15px;

      .room-name {
        font-size: 16px;
        font-weight: 500;
        color: #303133;
        margin-bottom: 8px;
      }

      .room-detail {
        font-size: 13px;
        color: #909399;

        .member-count {
          margin-right: 15px;

          i {
            margin-right: 4px;
          }
        }

        .room-status {
          &.active {
            color: #67c23a;
          }
          &.waiting {
            color: #e6a23c;
          }
          &.ended {
            color: #909399;
          }
        }
      }
    }
  }

  .pagination-area {
    margin-top: 20px;
    text-align: right;
  }
}
</style>
